<template>
	<div class="search-box">
		<input type="text" placeholder="请输入搜索条件" />
		<span></span>
	</div>
</template>

<script>
export default {
	props:['hinttext']
};
</script>

<style lang="less">
.search-box {
	margin: 26px;
	border: solid 1px gray;
	display: inline-block;
	position: relative;
	border-radius: 28px;
}

.search-box input[type='text'] {
	font-family: Raleway, sans-serif;
	font-size: 14px;
	width: 28px;
	height: 28px;
	padding: 5px 18px 5px 10px;
	border: none;
	box-sizing: border-box;
	border-radius: 28px;
	transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
}

.search-box input[type='text']:focus {
	outline: none;
}

.search-box input[type='text']:focus,
.search-box input[type='text']:not(:placeholder-shown) {
	width: 190px;
	transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

.search-box input[type='text']:focus + span,
.search-box input[type='text']:not(:placeholder-shown) + span {
	bottom: 7px;
	right: 7px;
	transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
}

.search-box input[type='text']:focus + span:after,
.search-box input[type='text']:not(:placeholder-shown) + span:after {
	top: 0px;
	right: 6px;
	opacity: 1;
	transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms, opacity 300ms ease 1100ms;
}

.search-box span {
	width: 13px;
	height: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -7px;
	right: -7px;
	transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
}

.search-box span:before,
.search-box span:after {
	content: '';
	height: 13px;
	border-left: solid 1px gray;
	position: absolute;
	transform: rotate(-45deg);
}

.search-box span:after {
	transform: rotate(45deg);
	opacity: 0;
	top: 0px;
	right: -7px;
	transition: top 300ms ease-out, right 300ms ease-out, opacity 300ms ease-out;
}
</style>
